<!-- ThreeScene.vue -->
<script setup>
import { onMounted, ref } from 'vue';
import { initThreeScene } from '../src/utils/three-utils';
import { GUIController } from '../src/utils/gui';

const threeContainer = ref(null);

onMounted(() => {
  if (threeContainer.value) {
    const { scene, camera, renderer, controls } = initThreeScene(threeContainer.value);
    const guiController = new GUIController({ camera, ambientLight: scene.getObjectByName('AmbientLight1'), directionalLight: scene.getObjectByName('DirectionalLight1') });
  }
});
</script>

<template>
  <div ref="threeContainer" class="three-container"></div>
</template>

<style>
.three-container {
  width: 100%;
  height: 100vh;
}
</style>